<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jsp/common/head.jsp"%>

<div class="content">
    <div class="container-fluid">
        <nav class="pull-left">
            <strong>你现在所在的位置是:</strong>&nbsp;&nbsp;&nbsp; <span>商品管理页面 >> 商品修改页面</span><br> <br>
        </nav>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div>
                <div class="card">
                    <div class="header">
                        <h4 class="title">
                            修改商品信息 <small> Edit Product Information</small>
                        </h4>
                    </div>
                    <div class="content">
                        <!-- 错误消息显示区域 -->
                        <c:if test="${not empty message}">
                            <div class="alert alert-danger" role="alert">
                                    ${message}
                            </div>
                        </c:if>

                        <form id="productForm" name="productForm" method="post"
                              action="${pageContext.request.contextPath }/sys/product/modify" >
                            <input type="hidden" name="id" value="${product.id }"/>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="productName">商品名称 <small> name</small> </label>
                                        <input type="text" class="form-control border-input" name="name"
                                               id="productName" value="${product.name }" required>
                                        <div class="error-message text-danger"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="productPrice">商品价格 <small> Price</small> </label>
                                        <input type="number" step="0.01" min="0.01" class="form-control border-input"
                                               name="price" id="productPrice" value="${product.price }" required>
                                        <div class="error-message text-danger"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="productStock">商品库存 <small> Stock</small> </label>
                                        <input type="number" min="0" class="form-control border-input"
                                               name="stock" id="productStock" value="${product.stock}" required>
                                        <div class="error-message text-danger"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="categoryLevel3Id">三级分类 <small> CategoryLevel3</small> </label>
                                        <select class="form-control border-input" name="categoryLevel3Id"
                                                id="categoryLevel3Id" required>
                                            <option value="">请选择</option>
                                            <c:forEach items="${categoryLevel3List}" var="category">
                                                <option value="${category.id}"
                                                        <c:if test="${category.id == product.categoryLevel3Id}">selected="selected"</c:if>>
                                                        ${category.name}
                                                </option>
                                            </c:forEach>
                                        </select>
                                        <div class="error-message text-danger"></div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="placement">摆放位置 <small> Placement</small> </label>
                                        <input type="text" class="form-control border-input" name="placement"
                                               id="placement" value="${product.placement}">
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="fileName">商品图片 <small> Image</small> </label>
                                        <input type="text" class="form-control border-input" name="fileName"
                                               id="fileName" value="${product.fileName}">
                                        <span class="help-block">请输入图片URL</span>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="description">商品描述</label>
                                        <textarea rows="5" class="form-control border-input"
                                                  name="description" id="description">${product.description}</textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center">
                                <button type="submit" id="save" class="btn btn-info btn-fill btn-wd">修改商品</button>
                                <button type="button" id="back" class="btn btn-success btn-fill btn-wd" onclick="history.back()">返回</button>
                            </div>
                            <div class="clearfix"></div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="/WEB-INF/jsp/common/foot.jsp"%>
<script type="text/javascript">
    // 激活侧边栏的商品管理菜单
    $(".sidebar-wrapper .nav li:eq(1)").addClass("active");

    // 表单验证
    $(document).ready(function() {
        // 表单提交前置校验
        $("#productForm").submit(function(e) {
            let isValid = true;
            $(".error-message").empty();

            // 验证商品名称
            const name = $("#productName").val().trim();
            if (name === "") {
                $("#productName").next(".error-message").text("商品名称不能为空");
                isValid = false;
            }

            // 验证价格
            const price = $("#productPrice").val().trim();
            if (price === "") {
                $("#productPrice").next(".error-message").text("商品价格不能为空");
                isValid = false;
            } else if (parseFloat(price) <= 0) {
                $("#productPrice").next(".error-message").text("商品价格必须大于0");
                isValid = false;
            }

            // 验证库存
            const stock = $("#productStock").val().trim();
            if (stock === "") {
                $("#productStock").next(".error-message").text("商品库存不能为空");
                isValid = false;
            } else if (parseInt(stock) < 0) {
                $("#productStock").next(".error-message").text("商品库存不能为负数");
                isValid = false;
            }

            // 验证分类
            const categoryId = $("#categoryLevel3Id").val();
            if (categoryId === "") {
                $("#categoryLevel3Id").next(".error-message").text("请选择三级分类");
                isValid = false;
            }

            if (!isValid) {
                e.preventDefault();
                return false;
            }

            // 提交前禁用按钮，防止重复提交
            $("#save").attr("disabled", true).text("提交中...");
        });
    });
</script>